<template>
    <div class="qx-container p-all-10">
        <tabs :target-list="targetList"></tabs>
		<merchant-info v-if="tabCurrentIndex == 1" @setNewMerchant="setNewMerchant"></merchant-info>
		<set-merchant-info v-if="tabCurrentIndex == 2" :merchant-id="merchantId" @saveMerchantInfo="saveMerchantInfo"></set-merchant-info>
    </div>
</template>
<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
    import tabs from '@/components/tabs/tabs.vue'
	import merchantInfo from './components/merchantInfo.vue'
	import setMerchantInfo from './components/setMerchantInfo.vue'
    export default {
		data() {
			return {
				targetList: {},
				merchantId: ''
			}
		},
		methods: {
			setNewMerchant(item = null ){
				if(item) {
					this.merchantId = item.merchantId
					
				}else{
					this.merchantId = ''
				}
				this.targetList = {name: '2', title: '新增商家'}
			},
			saveMerchantInfo() {
				this.setTabCurrentIndex(1)
				
			},
			...mapMutations({
				setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
			}),
			
		},
        components: {
            tabs,
			merchantInfo,
			setMerchantInfo
        },
		computed: {
			...mapGetters([
				'tabCurrentIndex',
				'setMerchantInfo'
			])
		}
		
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .qx-container {
        display: flex;
        flex: 1;
		height: 100%;
		box-sizing: border-box;
        flex-direction: column;
    }
</style>
